{% extends 'BudgetBudgetBundle::layout.html.twig' %}

{% block stylesheets %}
    {% stylesheets '@BudgetBudgetBundle/Resources/public/css/style.css' filter='cssrewrite' output='bundles/budgetbudget/css/style.css'%}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {% javascripts
    '@BudgetBudgetBundle/Resources/public/js/moment.js'
    '@BudgetBudgetBundle/Resources/public/js/statistic.js'
    %}
    <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}

    <script type="text/javascript">
        $( document ).ready(function() {
            $('.statistic-category-list').click(function(event){
                statistic.assignAjaxRequestToGetExpenseList($(this));
                event.preventDefault();
            })
        });
    </script>
{% endblock %}

{% block home_content %}
    <div id="avg-filter-form">
        {{ form_start(filterForm) }}
        {{ form_widget(filterForm) }}
        {{ form_end(filterForm) }}
    </div>

    <div id="statistic-content-body">
        <div id="avg-expenses-box" class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <span>Średnia suma dla okresu </span>
                </h3>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <tr>
                        <th>Lp</th>
                        <th>Kategoria</th>
                        <th>Suma</th>
                    </tr>
                    {% for data in avgSumList %}
                        <tr>
                            <td>{{ loop.index }}.</td>
                            <td>
                                <span class="category-name">
                                    <a class="statistic-category-list" id="category-{{ data.id }}" href="{{ path('BudgetBudgetBundle_family_statistics_list') }}">
                                        {{ data.name }}
                                    </a>
                                </span>
                            </td>
                            <td>{{ data.price|number_format(2, '.', ',') }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
        <div id="statistic-expense-list"></div>

    </div>
{% endblock %}